<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import {
  deleteCdnClusterApi,
  getCdnClusterListApi,
} from '@/apis/modules/cdn'
import { commonTableProps } from '@/utils/table'
// import usePopupPreGetData from '@/views/cdn/node/node-list/hooks/usePopupPreGetData'
import EditorDialog from './dialogs/EditorDialog.vue'
import EditorRemarkDialog from './dialogs/EditorRemarkDialog.vue'
// import NodeDetails from './dialogs/NodeDetails.vue'
// import SiteDetails from './dialogs/SiteDetails.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()

const queryParams = ref({ name_keyword: '' })

const {
  loading,
  data: tableData,
  pagination,
  run,
} = useListRequest(getCdnClusterListApi, {
  params: queryParams,
  immediate: true,
})

const {
  visible: editorDialogVisible,
  open: openEditorDialog,
  data: editorDialogData,
} = usePopup()

// const {
//   visible: nodeVisible,
//   open: openNode,
//   data: nodeData,
//   loading: nodeLoading,
//   record: nodeRecord,
//   pagination: nodePagination,
//   run: nodeRun,
// } = usePopupPreGetData(getCdnClusterNodeListApi)

// const {
//   visible: siteVisible,
//   open: openSite,
//   data: siteData,
//   loading: siteLoading,
//   record: siteRecord,
//   pagination: sitePagination,
//   run: siteRun,
// } = usePopupPreGetData(getCdnClusterSiteListApi)

// 删除区域
function handleDelete(id: string) {
  ModalHelper.error({
    title: '删除区域',
    content: '确定要删除该集群吗？集群内的节点将会迁移到启用集群中。',
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteCdnClusterApi({ id })
      await run()
      Message.success('删除成功')
    },
  })
}

// function handleBeforeChange(row: any, status: 1 | 2) {
//   return updateCdnClusterStatusApi({ id: row.id!, status }).then(() => {
//     Message.success('操作成功')
//     row.status = status
//     run()
//   })
// }

const { createSortChange } = useTable(run, tableData)
const onSorterChange = createSortChange(queryParams)

function shouldShowTooltip(remark: string) {
  if (!remark)
    return false
  return remark.length > 50 // 先按字符数快速判断
}

const {
  visible: editorRemarkDialogVisible,
  open: openEditorRemarkDialog,
  data: editorRemarkDialogData,
} = usePopup()
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditorDialog()"
        >
          新建区域
        </a-button>
        <a-input-search
          v-model="queryParams.name_keyword"
          placeholder="请输入区域名称搜索"
          class="!w-58"
          @change="run"
          @click="run"
        />
        <!-- <multiple-condition-search
          v-model="queryParams"
          :schema="searchSchema"
          @search="run"
        /> -->
      </div>
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSorterChange"
    >
      <template #remark="{ record }">
        <div class="flex">
          <!-- <span
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >{{ record.remark || '-' }}</span> -->
          <a-tooltip
            :content="record.remark || '-'"
            position="top"
            :disabled="!shouldShowTooltip(record.remark)"
          >
            <span class="overflow-hidden text-ellipsis whitespace-nowrap">
              {{ record.remark || '-' }}
            </span>
          </a-tooltip>
          <div class="ml-1 min-w-4">
            <i-icons-edit
              class="table-icon"
              size="16px"
              @click="openEditorRemarkDialog(record)"
            />
          </div>
        </div>
      </template>
      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditorDialog(record)"
        >
          <i-icons-edit size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          :disabled="record.status === 1"
          status="danger"
          @click="handleDelete(record.id)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <editor-dialog
    v-if="editorDialogVisible"
    v-model:visible="editorDialogVisible"
    :record="editorDialogData"
    @reload="run"
  />

  <editor-remark-dialog
    v-model:visible="editorRemarkDialogVisible"
    :record="editorRemarkDialogData"
    @reload="run"
  />
  <!-- <node-details
    v-if="nodeVisible"
    v-model:visible="nodeVisible"
    v-model:data="nodeData"
    v-model:pagination="nodePagination"
    :record="nodeRecord"
    :loading="nodeLoading"
    :run="nodeRun"
  />
  <site-details
    v-if="siteVisible"
    v-model:visible="siteVisible"
    v-model:data="siteData"
    v-model:pagination="sitePagination"
    :record="siteRecord"
    :loading="siteLoading"
    :run="siteRun"
  /> -->
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
